Return to doc.sitecore.com

Valid for Sitecore 5.3.1
9.  Image
Prev Next

Field of "Image" type contains image data. The easiest way to display it is by using Image XSL Control:

<sc:image field="My Image"/>

The same thing can be done with XslHelper.image function (sc:image):

<xsl:value-of select="sc:image('My Image',.)" disable-output-escaping="yes"/>

If you want to link an image, you can also do it in two ways:

If you want to make your own custom image you can use XslHelper.fld function (sc:fld) with subproperties:

source: <xsl:value-of select="sc:fld('image',.,'src')"/>

alt: <xsl:value-of select="sc:fld('image',.,'alt')"/>

width: <xsl:value-of select="sc:fld('image',.,'width')"/>

height: <xsl:value-of select="sc:fld('image',.,'height')"/>

hspace: <xsl:value-of select="sc:fld('image',.,'hspace')"/>

vspace: <xsl:value-of select="sc:fld('image',.,'vspace')"/>

For instance, you may use the following construct:

<img src="{sc:fld('My Image',.,'src')}" alt="{sc:fld('My Image',.,'alt')}" />

You can also extract Sitecore internal image properties if needed:

mediaid: <xsl:value-of select="sc:fld('image',.,'mediaid‘)"/>.

mediapath: <xsl:value-of select="sc:fld('image',.,'mediapath')"/>

showineditor: <xsl:value-of select="sc:fld('image',.,'showineditor')"/>

usethumbnail: <xsl:value-of select="sc:fld('image',.,'usethumbnail')"/>


Prev Next